<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登录</title>
		<link rel="stylesheet" href="css/login.css" />
	</head>
	<body>
		<div class="wrap">
			<!-- 头部logo -->
			<header class="header-wrap">
				<div class="header-logo"></div>
			</header>
			<!-- 主要内容 -->
			<section class="main-wrap">
				<div class="layout_panel">
					<div class="mian-content">
						<!-- 选择标题 -->
						<div id="nav-tabs" class="nav_tabs">
							<a class="navtab-link now" href="javascript: void(0);">帐号登录</a>
							<span class="line"></span>
							<a class="navtab-link" href="javascript: void(0);">扫码登录</a>
						</div>
						<div class="loginbox">
							<!-- 帐号登录 -->
							<div class="btn login_area">
								<input class="item_account" type="text" name="user" id="username" placeholder="邮箱/手机号码/小米ID">
								<input class="item_account" type="password" placeholder="密码" id="pwd" name="password">
								<div id="errer" class="err_tip">
									<em class="icon_error"></em>
									<span class="error-con">用户名或密码不正确</span>
								</div>
								<input class="btnadpt item_account" id="login-button" type="button" value="登录">
								<div class="other_panel myclear">
									<div class="login_type_link">
										<a href="javascript: void(0);">手机短信登录/注册</a>
									</div>
									<div class="links_area">
										<a href="register.html">立即注册</a>
										<span>|</span>
										<a href="javascript: void(0);">忘记密码？</a>
									</div>
									<div class="other_login_type">
										<p>----------------------------其他方式登录----------------------------</p>
										<div id="sns-login-links" class="oth_type_links">
											<a class="icon_type btn_qq" data-type="qq" href="javascript: void(0);" title="QQ登录" target="_blank">
												<i class="btn_sns_icontype icon_default_qq"></i>
											</a>
											<a class="icon_type btn_weibo" data-type="weibo" href="javascript: void(0);" title="微博登录" target="_blank">
												<i class="btn_sns_icontype icon_default_weibo"></i>
											</a>
											<a class="icon_type btn_alipay" data-type="alipay" href="javascript: void(0);" title="支付宝登录" target="_blank">
												<i class="btn_sns_icontype icon_default_alipay"></i>
											</a>
											<a class="icon_type btn_weixin" data-type="weixin" href="javascript: void(0);" title="微信登录" target="_blank">
												<i class="btn_sns_icontype icon_default_weixin"></i>
											</a>
										</div>
									</div>
								</div>
							</div>
							<!-- 扫码登录 -->
							<div class=" btn">
								<div class="ercode_pannel">
									<div class="ercode_box">
										<div class="code_iframe"></div>
										<div class="custom_sub_txt">
											<p class="custom-qr-name">使用<span>小米商城APP</span>扫一扫</p>
											<p>小米手机可打开「设置」&gt;「小米帐号」扫码登录</p>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</section>
			<!-- 底部声明 -->
			<footer class="footer-wrap">
				<div class="myclear">
					<ul class="lang-select-list">
						<li><a class="current" href="javascript: void(0);">简体</a>|</li>
						<li><a href="javascript: void(0);">繁体</a>|</li>
						<li><a href="javascript: void(0);">English</a>|</li>
						<li><a href="javascript: void(0);">常见问题</a>|</li>
						<li><a href="javascript: void(0);">隐私政策</a></li>
					</ul>
				</div>
				<div class="footer-intro">
					小米公司版权所有-京ICP备10046444-
					<a class="beian-record-link" target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802020134">
						<span><img src="img/login/ghs.png"></span>
						京公网安备11010802020134号
					</a>
					-京ICP证110507号
				</div>
			</footer>
		</div>
		<script type="text/javascript">
			let xiaomi = {
				// 初始化方法
				start() {
					this.loginArea();
					this.trigger();
				},

				// 登录验证
				loginArea() {
					// 获取保存在浏览器中的用户名和密码
					let phone = sessionStorage.getItem("phone");
					let idaccunt = sessionStorage.getItem("idaccunt");
					let pwd = sessionStorage.getItem("pwd");

					// 获取节点
					let username = document.getElementById('username');
					let pwds = document.getElementById('pwd');
					let errer = document.getElementById('errer');
					let loginBtn = document.getElementById('login-button');

					// 登录
					loginBtn.onclick = function() {
						if ((phone == username.value || idaccunt == username.value) && pwd == pwds.value) {
							// 跳转到主页面
							sessionStorage.setItem("flage", 'true');
							window.location.href = 'index.html';
						} else {
							errer.style.display = 'block';
						}
					}
				},

				// 切换登录方式
				trigger() {
					// 获取节点
					let navTabs = document.getElementById('nav-tabs').getElementsByTagName('a');
					let loginbox = document.getElementById('nav-tabs').nextElementSibling.getElementsByClassName('btn');
					loginbox[1].style.display = 'none';
					let _index = 0;

					// 切换登录方式
					for (let i = 0; i < navTabs.length; i++) {
						navTabs[i].onclick = function() {
							loginbox[i].style.display = 'block';
							loginbox[_index].style.display = 'none';
							navTabs[i].classList.add('now');
							navTabs[_index].classList.remove('now');
							_index = i;
						}
					}
				}
			}
			xiaomi.start();
		</script>
	</body>
</html>
